<template>
	<view class="pl30 pr30">
		<view class="bg-f mb30 pt30 pl30 pb30 radius10 mt30">
			<view class="flex col-center">
				<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a3050520038x1041074012b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639653789&t=b2ac1c6a41348c4e660429146ae5970e" class="w100 h100 radius50 mr10"></image>
				<view class="mt10">
					<view class="mb10">{{info.express_name}}快递</view>
					<!-- <text>官方电话:123</text> -->
				</view>
			</view>
			<view class="mt30">
				<text class="mr10">{{info.express_name}}快递:</text>
				<text @click="copy">{{info.nu}}</text>
			</view>
		</view>
		<view class="pl30 pr30 bg-f pt30 pb30 radius10" v-if="list.length>0">
			<u-time-line>
				<u-time-line-item nodeTop="2" v-for="(item,i) in list" :key='i'>
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #D23030;" v-if="i==0">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<!-- <view class="u-order-title">待取件</view> -->
							<view class="u-order-desc">{{item.context}}</view>
							<view class="u-order-time">{{item.ftime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="bg-f pt30 pr30 pl30 pb30 radius16" v-else-if="kuaidiDetail">
			<rich-text :nodes="kuaidiDetail" ></rich-text>
		</view>
		<u-empty text="暂无数据" mode="list" v-else></u-empty>
	</view>
</template>


<script>
	export default {
		name:'kuaidi',
		onLoad(opt) {
			this.order_sn=opt.order_sn
			this.getLogistics()
		},
		data() {
			return {
				order_sn:'',
				info:{},
				list:[],
				num:'',
				kuaidiDetail:uni.getStorageSync('kuaidiDetail')
			}
		},
		methods:{
			getLogistics() {
				this.$api.logistics({order_sn:this.order_sn}).then(res=>{
					console.log(res)
					this.info=res.data
					res.data.data? this.list=res.data.data : ''
					this.list.length>0? this.num=res.data.data.length : ''
				})
			},
			//复制快递单号
			copy() {
				this.$tool.copy(this.info.nu)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>